edgecenter ui kit v1

Единая система интерфейса: сайт и панель управления

Одни токены, одна сетка, одни состояния. Всё, что ниже, собрано на тех же значениях, что и главная страница — компоненты переносятся в админку без правок стилей.

Токены

Палитра держится на одном синем акценте и холодном нейтральном ряду. Семантические цвета используются только для состояний — не для декора.

Цвет

Ink faint — только для графики: разделители, иконки, точки — там достаточно 3:1. Для вторичного текста — Ink secondary: 5:1 на белом, проходит AA.

  • {{ c.name }} {{ c.hex }}

Отступы — шаг 4

  • {{ s.label }}

Радиусы

  • 6
  • 9
  • 12
  • 16
  • pill

Тени

  • flat
  • card
  • overlay

Типографика

Helvetica Neue для интерфейса, системный моношрифт для идентификаторов, ключей и метрик. Заголовки — 600, текст — 400; трекинг сжимается на крупных кеглях.

  • Display / 44 600 · line-height 1.08 · tracking −0.032em · только hero
  • Заголовок H2 / 28 600 · секции страницы и модальных окон
  • Заголовок карточки / 18 600 · карточки, строки списков
  • Основной текст / 15 — читается в длинных абзацах и в таблицах, не требует ручной подгонки межстрочного. 400 · line-height 1.55
  • Подпись / 13 — вспомогательные пояснения, единицы, время 400 · цвет #5A6779
  • mono / 13.5 — cdn-res-8f2a91 · 42.7 Тбит/с ID, ключи, метрики, код

Кнопки

Одно первичное действие на экран. Высоты 36 / 44 / 50 — под таблицы, формы и лендинг; на мобильных не ниже 44.

Правила

  • Глагол в инфинитиве: «Создать ресурс», не «Ок».
  • Опасное действие подтверждается вводом имени объекта.
  • Загрузка блокирует только свою кнопку, не весь экран.

Формы

Метка всегда сверху, подсказка — под полем. Ошибка объясняет, что сделать, и не исчезает до исправления.

CNAME будет выдан после создания ресурса.

Укажите домен или IP без пробелов — например app.example.com

Протокол до origin
Оптимизация
Переключатели
Сегментированный выбор

Статусы и метки

Цвет никогда не единственный носитель смысла: рядом всегда текст, а у статусов ресурсов — точка.

  • Активен
  • Обновляется
  • Ошибка
  • Приостановлен
  • Beta
  • cdn-res-8f2a91
  • Плановые работы 12 августаРегион ru-2 будет недоступен 5 минут.
  • Баланс закончится через 4 дняПополните счёт, чтобы ресурсы не остановились.
  • Origin не отвечает7 из 10 проверок вернули 502. Смотрите журнал.

Данные

Метрики — крупно и моношрифтом, числа выравниваются по правому краю. Таблица переносится в скролл по горизонтали, а не ломает вёрстку.

  • {{ m.label }} {{ m.value }} {{ m.delta }}
CDN-ресурсы аккаунта
Ресурс Статус Регион Трафик, 24 ч Cache hit
{{ r.domain }} {{ r.id }} {{ r.status }} {{ r.region }} {{ r.traffic }} {{ r.hit }} Настроить

Ничего не найдено

Проверьте написание домена или сбросьте фильтр по статусу.
{{ rowsLabel }}

Скелетоны загрузки

Графики

Графики рисует Chart.js — библиотека под лицензией MIT, свободной для коммерческого использования при сохранении текста лицензии. Своих реализаций не держим: оси, тултипы, ретина и адаптация к теме уже решены в ней.

Полоса доступности остаётся на вёрстке: это не график значений, а календарь состояний, и библиотека здесь только мешала бы.

Спарклайн 60 мин

Минутная гранулярность. Без осей — только форма и последнее значение.

2,4 Гбит/с
Столбики с накоплением 24 ч

Часовые корзины. Сегменты стыкуются без зазора, скруглён только верх столбца.

Линия с сеткой 30 дней

Две серии, дневные точки. Сетка светлее линий, подписи по краям.

Полоса доступности 90 дней

Одна плитка — сутки. Не график значений, а календарь состояний.

90 дней назад 99,95% аптайма сегодня
Доли срез

Кольцо только когда долей мало и одна доминирует. Значения всегда дублируются списком.

  • {{ r.label }} {{ r.value }}

Обратная связь

Тосты — для результата действия, модальные окна — только для подтверждения и коротких форм.

Кэш очищен cdn.example.com — 1 248 объектов
Не удалось сохранить правило WAF Проверьте синтаксис условия и повторите

Тост живёт 6 секунд, ошибка — до закрытия. Одновременно не больше трёх.

Удалить ресурс cdn.example.com?

Отдача контента прекратится сразу. Восстановить настройки после удаления нельзя.

Экран админки на тех же компонентах

Ни одного нового стиля: боковое меню, топбар, метрики и таблица собраны из блоков выше.

Обзор аккаунта
  • Трафик за сутки 128 ТБ
  • Cache hit 96,4%
  • Отбито атак 37
  • Активных ВМ 24
Последние события Журнал
  • Правило WAF обновлено — shop.example.com 4 мин назад
  • Кластер prod-ru1 добавил 2 узла 26 мин назад
  • Отбита атака 84 Гбит/с на api.example.com 1 ч назад

Шкала размеров

Пять шагов — xs 24, s 28, m 32, l 40, xl 48. В плотных таблицах живут xs и s, в формах m и l, на публичных страницах l и xl. Все контролы одного шага имеют одинаковую высоту, поэтому встают в ряд без подгонки.

Button — xs / s / m / l / xl

TextInput — s / m / l / xl

  • {{ i.label }}

Label — xs / s / m

beta

Avatar — xs → xl

ИП

Icon — 12 / 16 / 20 / 24

{{ i.icon }}

Spin / Loader

Tabs — m / l / xl

Виды кнопок и действий

Десять видов на один размер m. На экране допустима одна action-кнопка; остальное — normal, flat или link.

Cache hit ratio Обновить ⌘ R

Ввод данных

Числовые поля, выпадающие списки, ползунки и переключатели — те же, что в панели управления.

NumberInput — количество узлов

Select — регион

Slider — порог алерта: {{ rngLabel }}

Switch — s / m / l

PinInput — код из письма

Search с очисткой

FilePreview

  • {{ f.name }} {{ f.size }}

Palette

Отображение данных

Карточки, метки, списки, таблица с тремя плотностями и индикаторы прогресса.

Card — outlined / filled / raised / selected

  • outlined

    Контейнер по умолчанию

  • filled

    Вторичная информация

  • raised

    Поверх контента

  • selected

    Выбранный вариант

Label — темы

{{ l.label }}

User / UserLabel

  • Ирина Полякова Владелец аккаунта
  • Денис Королёв

DefinitionList

{{ d.k }}
{{ d.v }}

List

  • {{ i.label }} {{ i.hint }}

Table — плотность s / m / l, сортировка

Ресурс Регион Трафик
{{ r.a }} {{ r.b }} {{ r.c }}

Progress

  • {{ p.label }}

Оверлеи и статусы

Подсказки, поповеры, размеры модальных окон, панель сбоку, алерты и пустые состояния.

Tooltip

Доля запросов, отданных из кэша

Popover

Прогрев кэша

Загрузим указанные URL на все узлы до переключения трафика.

Modal — s / m / l

s · 420 m · 560 l · 760

Sheet / Drawer

панель справа

Alert — info / success / warning / danger

  • Плановые работы в ru-2 12 августа, 5 минут недоступности.
  • Сертификат выпущен и установлен на все узлы.
  • Баланса хватит на 4 дня при текущем расходе.
  • Origin не отвечает: 7 из 10 проверок вернули 502.

PlaceholderContainer — пустое состояние

Здесь пока нет ресурсов

Создайте первый CDN-ресурс — потребуется домен и адрес origin. Займёт около двух минут.